{% extends "base.html" %}
{% block title %}教师管理{% endblock %}
{% block head %}
    {{ super() }}
	<link href="/static/uikit/css/components/datepicker.css" rel="stylesheet" type="text/css" />
	<link href="/static/uikit/css/components/form-select.css" rel="stylesheet" type="text/css" />	
	<script src="/static/uikit/js/components/datepicker.js"></script>
	<script src="/static/uikit/js/components/form-select.js"></script>
	<script src="/static/uikit/js/components/upload.js"></script> 
	
	
<script>
var vm	;
var   ID = '{{ id }}';
var   action = '{{ action }}';
var	classes;
function initVM(teacher) {
     vm = new Vue({
		el: '#form-teacher-add',
		data: teacher,
		methods: {            
		    submit: function (event) {
				event.preventDefault();
				this.date=document.getElementById("date").value
			    date= this.date +' 08:00:00'
			    date = js_strto_time(date)				
                if (! this.name.trim()) {
                    return alert('请输入名字');
                } 
				// 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
                var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
				if (! this.id_number.trim() |! reg.test(this.id_number)) {
                    return alert('请输入身份证号码或输入的身份证不合法')					
                }										
                if (! this.university.trim()) {
                    return alert('请输入毕业院校');
                }				
                if (! this.specialty.trim()) {
                    return alert('请输入所学专业');
                }				
                if (! this.phone.trim()) {
                    return alert('请输入联系电话');
                }				
                if (!this.date) {
                    return alert('请选择入院时间');
                }
				if (!this.t_type) {
                    return alert('请选择类别');
                }
                var $form = $('#form-teacher-add').find('form');
                    postJSON(action,{
					name:this.name,
					sex:this.sex,
					id_number:this.id_number,
					educational:this.educational,
					university:this.university,
					specialty:this.specialty,
					phone:this.phone,
					date:date,
					image:this.image,
					t_type:this.t_type,
				}, function (err, r) {
					if (err) {
						return alert(err.message || err.error || err);
					}
					else {
					    if (ID){
						    return location.assign('/teachers');
						}
						else{
						    return location.assign('/teachers/add');
						}
					}
				});
				}
			}
		})
}
$(function () {
    if (ID) {
 	    getJSON('/api/teacher/' + ID, function (err, teacher) {
            if (err) {
                return  (err);
            }
            initVM(teacher);
			vm.date = teacher.enter_date;
			document.getElementById("date").value = js_date_time(teacher.enter_date);
			vm.image = teacher.image;
			url=teacher.image;
			loadimage(url);
        });
    }
    else {
        initVM({
            name:'',
			sex:'',
			id_number:'',
			educational:'',
			university:'',
			specialty:'',
			phone:'',
			date:'',
			image:'',
			t_type:'',
        });
    }
});

//显示照片
function loadimage(url) { 
	var  xmlhttp=new XMLHttpRequest();
	xmlhttp.onreadystatechange=function()
		{
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
			{
			document.getElementById("photo").innerHTML='<img src="/'+xmlhttp.responseText+'"/>'
			}
		}
	xmlhttp.open("POST","/photo",true);
	xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencode");
	xmlhttp.send(url);
	vm.image=url;
}

//时间转换为时间戳
function js_strto_time(str_time){
    var new_str = str_time.replace(/:/g,'-');
    new_str = new_str.replace(/ /g,'-');
    var arr = new_str.split("-");
    var datum = new Date(Date.UTC(arr[0],arr[1]-1,arr[2],arr[3]-8,arr[4],arr[5]));
    return strtotime = datum.getTime()/1000;
}
function js_date_time(unixtime) {
    var timestr = new Date(parseInt(unixtime) * 1000);
    var datetime = timestr.toLocaleDateString().replace(/年|月/g, "-").replace(/日/g, " ");
    return datetime;
}


$(function(){
        var progressbar = $("#progressbar"),
            bar         = progressbar.find('.uk-progress-bar'),
            settings    = {

            action: '/upload', // 上传路径 url

            allow : '*.(jpg|jpeg|gif|png)', // 只允许上传图片

            loadstart: function() {
                bar.css("width", "0%").text("0%");
                progressbar.removeClass("uk-hidden");
            },

            progress: function(percent) {
                percent = Math.ceil(percent);
                bar.css("width", percent+"%").text(percent+"%");
            },

            allcomplete: function(response) {

                bar.css("width", "100%").text("100%");

                setTimeout(function(){
                    progressbar.addClass("uk-hidden");
                }, 250);
				loadimage(response)
            }
        };

        var select = UIkit.uploadSelect($("#upload-select"), settings),
            drop   = UIkit.uploadDrop($("#upload-drop"), settings);
    });


</script>

{% endblock %}

{%block panel%}
<div class="tm-panel  uk-panel uk-panel-box  ">                        
	<div class="uk-panel-title">教师与班级管理</div>
	<div class="uk-panel-li"><a href="/teachers/add">教师档案登记</a></div> 
	<div class="line"></div>
	<div class="uk-panel-li"><a href="/teachers">教师信息查询</a></div>
	<div class="line"></div>
	<br>
	<div class="uk-panel-li"><a href="/classes/add">建立新班级</a></div> 
	<div class="line"></div>
	<div class="uk-panel-li"><a href="/classes">班级信息</a></div>
	<div class="line"></div>
</div>
{%endblock%}
					
{% block content %}
<div class="tit"><a href="/">主页 </a>  》 <a href="/">教师管理 </a></div>
<div class="divmain-title">教师档案登记</div>				

<ul class="uk-tab" data-uk-tab="{connect:'#tab-content'}">
	<li class="uk-active"><a href="#">基本信息</a></li>
	<li><a href="#">加入照片</a></li>
	
</ul>

<ul id="tab-content" class="uk-switcher uk-margin">
	<li class="uk-active">				

<div class="divmain" id="form-teacher-add" >
<form  v-on="submit: submit" class="uk-form uk-form-horizontal">

<div class="uk-form-row ">
	<label class="uk-form-label" for="name">名字:</label>
	<div class="uk-form-controls">
		<input v-model="name" id="name" type="text"  placeholder="名字" >
	</div>
</div> 	

<div class="uk-form-row">
	<label class="uk-form-label">性别:</label>
	<div class="uk-form-controls  uk-form-controls-text"> 						
		<label><input v-model="sex" type="radio" name="radio" value="男">男</label>
		<label><input v-model="sex" type="radio" name="radio" value="女">女</label>							
	</div>
</div>

<div class="uk-form-row">
	<label class="uk-form-label">身份证号码：</label>
	<div class="uk-form-controls">
		<input v-model="id_number" type="text" maxlength="50" placeholder="身份证号码" class="">
	</div>
</div>

<div class="uk-form-row">
	<label class="uk-form-label">学历:</label>
	<div class="uk-form-controls  uk-form-controls-text">
		<select v-model="educational" >
			<option value="本科">本科</option>
			<option value="硕士">硕士</option>
			<option value="博士">博士</option>
			<option value="专科">专科</option>
			<option value="中专">中专</option>
		</select>
	</div>
</div>

<div class="uk-form-row">
	<label class="uk-form-label">毕业院校:</label>
	<div class="uk-form-controls  ">
		<input v-model="university" type="text" maxlength="50" placeholder="毕业院校" class="">{{'{{'}}id_number{{'}}'}} 
	</div>	
</div>

<div class="uk-form-row"> 
	<label class="uk-form-label">专业:</label>
	<div class="uk-form-controls">
		<input v-model="specialty" id="specialty" type="text"  placeholder="专业" >
	</div>	
</div>
	
<div class="uk-form-row">
	<label class="uk-form-label">联系电话:</label>
	<div class="uk-form-controls">
		<input v-model="phone" type="text"  placeholder="联系电话">
	</div>
</div>
<div class="uk-form-row">
	<label class="uk-form-label">入院时间:</label>
	<div class="uk-form-controls  uk-form-controls-text">
		<input v-model="date" id="date" data-uk-datepicker="{format:'YYYY-MM-DD'}" type="text" placeholder="选择进入时间" >
	</div>
</div>

<div class="uk-form-row">
	<label class="uk-form-label">类别:</label>
	<div class="uk-form-controls  uk-form-controls-text">
		<select v-model="t_type" id="t_type" v-on="change:change_classes()">
		<option value="常规班">常规班</option>
		<option value="兴趣班">兴趣班</option>
		</select>
	</div>		
</div>	
			
				
<div class="divbutton">
<button type="submit" class="uk-button uk-button-primary"> 加入</button>
</div>
</form>
</div>

</li>

<li>						
<div class="divmain" id="form-kid-add" >					
	<div id="upload-drop" class="uk-placeholder uk-text-center">
		<i class="uk-icon-cloud-upload uk-icon-medium uk-text-muted uk-margin-small-right"></i> 将文件拖拽至此 或 <a class="uk-form-file"><input id="upload-select" type="file"></a>.
	</div>
	<div id="progressbar" class="uk-progress uk-hidden">
		<div class="uk-progress-bar" style="width: 0%;">0%</div>
	</div>						
		<div id="divphoto">
	 <div id="photo">
	
	 </div>
	</div>
</div>						
</li>
					
</ul>


{%endblock%}
             